<!--
 * @Description: 仪表盘
 * @Date: 2022-03-09 09:16:30
 * @Author: yeming
-->
<template>
  <div id="pfdctrl">
    <svg xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         version="1.1"
         id="svgpfd"
         width="300"
         height="250"
         viewBox="0 0 300 250">
      <defs>
        <linearGradient id="background-blue"
                        x1="0%"
                        y1="0%"
                        x2="0%"
                        y2="100%">
          <stop offset="0%"
                style="stop-color: #003464" />
          <stop offset="100%"
                style="stop-color: #0069ae" />
        </linearGradient>
        <linearGradient id="background-green"
                        x1="0%"
                        y1="0%"
                        x2="0%"
                        y2="100%">
          <stop offset="0%"
                style="stop-color: #056c5b" />
          <stop offset="100%"
                style="stop-color: #10c598" />
        </linearGradient>
        <clipPath id="clip">
          <path d="M 300,5 L 300,245 A 9,9 0 0 1 291,250 L 9,250 A 9,9 0 0 1 0,245 L 0,5 A 9,9 0 0 1 9,0 L 291,0 A 9,9 0 0 1 300,5 z"></path>
        </clipPath>
      </defs>
      <g id="background"
         clip-path="url(#clip)">
        <rect width="600"
              height="600"
              x="-150"
              y="-475"
              fill="#0069ae"
              :transform="getNumbPitchRoll" />
      </g>
      <g id="background2"
         clip-path="url(#clip)">
        <rect width="600"
              height="600"
              x="-150"
              y="125"
              fill="url(#background-green)"
              :transform="getNumbPitchRoll" />
      </g>

      <!-- <svg>
        <g>
          <use x="-150" y="-125" xlink:href="#background" />
        </g>
      </svg> -->

      <defs>
        <g id="speedRule"
           style="font-size: 12px"
           :transform="getSpeed">
          <path d="M 25 0 L25 625"
                fill="#327864"
                stroke="white"
                stroke-width="1" />

          <text fill="black"
                y="10">160</text>
          <path d="M 20 0 L24 0"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="25">155</text>
          <path d="M 20 20 L24 20"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="45">150</text>
          <path d="M 20 40 L24 40"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="65">145</text>
          <path d="M 20 60 L24 60"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="85">140</text>
          <path d="M 20 80 L24 80"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="105">135</text>
          <path d="M 20 100 L24 100"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="125">130</text>
          <path d="M 20 120 L24 120"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="145">125</text>
          <path d="M 20 140 L24 140"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="165">120</text>
          <path d="M 20 160 L24 160"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="185">115</text>
          <path d="M 20 180 L24 180"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="205">110</text>
          <path d="M 20 200 L24 200"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="225">105</text>
          <path d="M 20 220 L24 220"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="245">100</text>
          <path d="M 20 240 L24 240"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="265">95</text>
          <path d="M 20 260 L24 260"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="285">90</text>
          <path d="M 20 280 L24 280"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="305">85</text>
          <path d="M 20 300 L24 300"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="325">80</text>
          <path d="M 20 320 L24 320"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="345">75</text>
          <path d="M 20 340 L24 340"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="365">70</text>
          <path d="M 20 360 L24 360"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="385">65</text>
          <path d="M 20 380 L24 380"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="405">60</text>
          <path d="M 20 400 L24 400"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="425">55</text>
          <path d="M 20 420 L24 420"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="445">50</text>
          <path d="M 20 440 L24 440"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="465">45</text>
          <path d="M 20 460 L24 460"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="485">40</text>
          <path d="M 20 480 L24 480"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="505">35</text>
          <path d="M 20 500 L24 500"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="525">30</text>
          <path d="M 20 520 L24 520"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="545">25</text>
          <path d="M 20 540 L24 540"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="565">20</text>
          <path d="M 20 560 L24 560"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="585">15</text>
          <path d="M 20 580 L24 580"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="605">05</text>
          <path d="M 20 600 L24 600"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="black"
                y="625">00</text>
          <path d="M 20 625 L24 625"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
        </g>

        <g id="panel"
           :transform="getTargetSpeed">
          <path d="M 5 645.75 L 10 641.75 10 649.75 Z"
                fill="none"
                stroke="Aqua"
                stroke-width="1.75" />
        </g>
      </defs>

      <g id="speed">
        <rect width="55"
              height="20"
              y="10"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <rect width="55"
              height="200"
              y="30"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <rect width="55"
              height="15"
              y="230"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <text x="18"
              y="25"
              fill="Aqua"
              font-size="16">{{ TAS }}</text>
        <text x="10"
              y="243"
              fill="black"
              font-size="14">km/h</text>
        <image href="static/img/panel/CurrentSpeed.png"
               width="26"
               height="10"
               x="28"
               y="120"></image>

        <svg width="55"
             height="200"
             y="30">
          <use x="15"
               y="-545"
               xlink:href="#speedRule" />
          <use x="35"
               y="-455"
               xlink:href="#panel" />
        </svg>
      </g>

      <defs>
        <g id="AltitudeHighPartRule"
           style="font-size: 12px"
           :transform="getAltHigh">
          <rect width="30"
                height="364"
                stroke="red"
                stroke-width="0"
                fill="none" />
          <path d="M 20 0 L20 360"
                fill="#327864"
                stroke="white"
                stroke-width="1" />

          <text fill="white"
                y="10">15</text>
          <path d="M 16 0 L20 0"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                y="25">14</text>
          <path d="M 16 20 L20 20"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                y="45">13</text>
          <path d="M 16 40 L20 40"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                y="65">12</text>
          <path d="M 16 60 L20 60"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                y="85">11</text>
          <path d="M 16 80 L20 80"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                y="105">10</text>
          <path d="M 16 100 L20 100"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="125">9</text>
          <path d="M 16 120 L20 120"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="145">8</text>
          <path d="M 16 140 L20 140"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="165">7</text>
          <path d="M 16 160 L20 160"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="185">6</text>
          <path d="M 16 180 L20 180"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="205">5</text>
          <path d="M 16 200 L20 200"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="225">4</text>
          <path d="M 16 220 L20 220"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="245">3</text>
          <path d="M 16 240 L20 240"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="265">2</text>
          <path d="M 16 260 L20 260"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="285">1</text>
          <path d="M 16 280 L20 280"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="4"
                y="305">0</text>
          <path d="M 16 300 L20 300"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="2"
                y="325">-1</text>
          <path d="M 16 320 L20 320"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="2"
                y="345">-2</text>
          <path d="M 16 340 L20 340"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                x="2"
                y="360">-3</text>
          <path d="M 16 360 L20 360"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
        </g>

        <g id="AltitudeLowPartRule"
           style="font-size: 11px"
           :transform="getAltLow">
          <rect width="20"
                height="225"
                fill="#666666" />
          <text fill="#04DD04"
                x="2"
                y="12">99</text>
          <text fill="#04DD04"
                x="2"
                y="22">95</text>
          <text fill="#04DD04"
                x="2"
                y="32">90</text>
          <text fill="#04DD04"
                x="2"
                y="42">85</text>
          <text fill="#04DD04"
                x="2"
                y="52">80</text>
          <text fill="#04DD04"
                x="2"
                y="62">75</text>
          <text fill="#04DD04"
                x="2"
                y="72">70</text>
          <text fill="#04DD04"
                x="2"
                y="82">65</text>
          <text fill="#04DD04"
                x="2"
                y="92">60</text>
          <text fill="#04DD04"
                x="2"
                y="102">55</text>
          <text fill="#04DD04"
                x="2"
                y="112">50</text>
          <text fill="#04DD04"
                x="2"
                y="122">45</text>
          <text fill="#04DD04"
                x="2"
                y="132">40</text>
          <text fill="#04DD04"
                x="2"
                y="142">35</text>
          <text fill="#04DD04"
                x="2"
                y="152">30</text>
          <text fill="#04DD04"
                x="2"
                y="162">25</text>
          <text fill="#04DD04"
                x="2"
                y="172">20</text>
          <text fill="#04DD04"
                x="2"
                y="182">15</text>
          <text fill="#04DD04"
                x="2"
                y="192">10</text>
          <text fill="#04DD04"
                x="2"
                y="202">05</text>
          <text fill="#04DD04"
                x="2"
                y="212">00</text>
        </g>
      </defs>

      <g id="altitude">
        <rect width="55"
              height="20"
              x="245"
              y="10"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <rect width="55"
              height="200"
              x="245"
              y="30"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <rect width="55"
              height="15"
              x="245"
              y="230"
              stroke="white"
              stroke-width="1"
              fill="none" />
        <text x="260"
              y="25"
              fill="Aqua"
              font-size="16">{{ TreAlt }}</text>
        <text x="265"
              y="240"
              fill="black"
              font-size="14">m</text>

        <svg width="55"
             height="190"
             x="245"
             y="30">
          <use x="15"
               y="-170"
               xlink:href="#AltitudeHighPartRule" />

          <svg width="30"
               height="34"
               x="35"
               y="75">
            <use y="-174"
                 xlink:href="#AltitudeLowPartRule" />
            <line x1="0"
                  y1="0"
                  x2="30"
                  y2="0"
                  style="stroke: white; stroke-width: 1" />
            <line x1="0"
                  y1="34"
                  x2="30"
                  y2="34"
                  style="stroke: white; stroke-width: 1" />
          </svg>svg>

          <svg width="35"
               height="25"
               x="1"
               y="79">
            <rect width="54"
                  height="25"
                  fill="#666666" />
            <line x1="0"
                  y1="0"
                  x2="34"
                  y2="0"
                  style="stroke: white; stroke-width: 1" />
            <line x1="0"
                  y1="25"
                  x2="34"
                  y2="25"
                  style="stroke: white; stroke-width: 1" />
            <text x="18"
                  y="18"
                  fill="#04DD04"
                  font-size="16">
              {{ getAltHighNum() }}
            </text>
          </svg>
        </svg>
      </g>

      <defs>
        <g id="angleRule"
           :transform="getYaw">
          <rect width="710"
                height="50"
                stroke="yellow"
                stroke-width="0"
                fill="none" />
          <path d="M 5 8 L705 8"
                fill="#327864"
                stroke="white"
                stroke-width="1" />

          <text fill="white"
                style="font-size: 10px"
                x="2"
                y="25">0</text>
          <path d="M 5 8 L5 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 15 8 L15 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="17"
                y="25">10</text>
          <path d="M 25 8 L25 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 35 8 L35 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="37"
                y="25">20</text>
          <path d="M 45 8 L45 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 55 8 L55 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="57"
                y="25">30</text>
          <path d="M 65 8 L65 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 75 8 L75 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="77"
                y="25">40</text>
          <path d="M 85 8 L85 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 95 8 L95 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="97"
                y="25">50</text>
          <path d="M 105 8 L105 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 115 8 L115 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="117"
                y="25">60</text>
          <path d="M 125 8 L125 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 135 8 L135 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="137"
                y="25">70</text>
          <path d="M 145 8 L145 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 155 8 L155 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="157"
                y="25">80</text>
          <path d="M 165 8 L165 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 175 8 L175 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="177"
                y="25">90</text>
          <path d="M 185 8 L185 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 195 8 L195 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="197"
                y="25">110</text>
          <path d="M 205 8 L205 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 215 8 L215 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="217"
                y="25">120</text>
          <path d="M 225 8 L225 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 235 8 L235 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="237"
                y="25">130</text>
          <path d="M 245 8 L245 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 255 8 L255 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="257"
                y="25">140</text>
          <path d="M 265 8 L265 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 275 8 L275 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="277"
                y="25">150</text>
          <path d="M 285 8 L285 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 295 8 L295 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="297"
                y="25">160</text>
          <path d="M 305 8 L305 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 315 8 L315 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="317"
                y="25">170</text>
          <path d="M 325 8 L325 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 335 8 L335 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="337"
                y="25">180</text>
          <path d="M 345 8 L345 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 355 8 L355 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="357"
                y="25">190</text>
          <path d="M 365 8 L365 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 375 8 L375 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="377"
                y="25">200</text>
          <path d="M 385 8 L385 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 395 8 L395 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="397"
                y="25">210</text>
          <path d="M 405 8 L405 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 415 8 L415 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="417"
                y="25">220</text>
          <path d="M 425 8 L425 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 435 8 L435 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="437"
                y="25">230</text>
          <path d="M 445 8 L445 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 455 8 L455 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="457"
                y="25">240</text>
          <path d="M 465 8 L465 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 475 8 L475 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="477"
                y="25">250</text>
          <path d="M 485 8 L485 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 495 8 L495 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="497"
                y="25">260</text>
          <path d="M 505 8 L505 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 515 8 L515 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="517"
                y="25">270</text>
          <path d="M 525 8 L525 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 535 8 L535 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="537"
                y="25">280</text>
          <path d="M 545 8 L545 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 555 8 L555 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="557"
                y="25">290</text>
          <path d="M 565 8 L565 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 575 8 L575 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="577"
                y="25">300</text>
          <path d="M 585 8 L585 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 595 8 L595 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="597"
                y="25">310</text>
          <path d="M 605 8 L605 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 615 8 L615 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="617"
                y="25">320</text>
          <path d="M 625 8 L625 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 635 8 L635 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="637"
                y="25">330</text>
          <path d="M 645 8 L645 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 655 8 L655 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="657"
                y="25">340</text>
          <path d="M 665 8 L665 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 675 8 L675 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="677"
                y="25">350</text>
          <path d="M 685 8 L685 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <path d="M 695 8 L695 11"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
          <text fill="white"
                style="font-size: 10px"
                x="697"
                y="25">359</text>
          <path d="M 705 8 L705 13"
                fill="#327864"
                stroke="white"
                stroke-width="1" />
        </g>

        <g id="panel-horizon"
           :transform="getTargetYaw">
          <rect width="720"
                height="10"
                stroke="red"
                stroke-width="0"
                fill="none" />
          <path d="M 2 4 8 4 5 8 Z"
                fill="none"
                stroke="Aqua"
                stroke-width="1.75" />
        </g>
      </defs>

      <g id="angle">
        <rect width="170"
              height="40"
              x="65"
              y="210"
              stroke="white"
              stroke-width="1"
              fill="none" />

        <svg width="170"
             height="40"
             x="65"
             y="210">
          <text x="2"
                y="12"
                fill="Aqua"
                style="font-size: 12px">
            {{ Tyaw }}
          </text>
          <use x="0"
               y="10"
               xlink:href="#angleRule" />
          <use x="0"
               y="5"
               xlink:href="#panel-horizon" />
          <rect width="2"
                height="18"
                x="50%"
                y="10"
                fill="yellow" />
        </svg>
      </g>

      <defs>
        <g id="panel-targetpitch"
           :transform="getTargetPitch">
          <path d="M 24 110 28 107 28 113 Z"
                fill="none"
                stroke="Aqua"
                stroke-width="1.5" />
        </g>
      </defs>

      <g id="horizonBall-Angle"
         :transform="getRoll">
        <path d="M 150 35 L 147 39 153 39 Z"
              fill="none"
              stroke="Yellow"
              stroke-width="1.5" />
        <path d="M 146 42 L 154 42 156 45 144 45 Z"
              fill="none"
              stroke="Yellow"
              stroke-width="1.5" />
      </g>

      <g id="horizonBall-TargetAngle"
         :transform="getTargetRoll">
        <path d="M 150 15 L147 11 153 11 Z"
              fill="none"
              stroke="Aqua"
              stroke-width="1.5" />
      </g>
      <svg height="150"
           x="100"
           y="35"
           viewBox="100 60 300 150">
        <g id="horizonBall"
           style="font-size: 12px"
           :transform="getNumbPitchRoll">
          <path d="M 140 150 L 160 150"
                fill="#327864"
                stroke="white"
                stroke-width="1" />

          <path d="M 145 140 L 155 140"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140 130 L 160 130"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 120 L 155 120"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135 110 L 165 110"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 100 L 155 100"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140  90 L 160  90"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145  80 L 155  80"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135  70 L 165  70"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 60 L 155 60"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140  50 L 160  50"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145  40 L 155  40"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135  30 L 165  30"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <text fill="white"
                x="115"
                y="115">10</text>
          <text fill="white"
                x="170"
                y="115">10</text>
          <text fill="white"
                x="115"
                y="75">20</text>
          <text fill="white"
                x="170"
                y="75">20</text>
          <text fill="white"
                x="115"
                y="35">30</text>
          <text fill="white"
                x="170"
                y="35">30</text>

          <path d="M 145 160 L 155 160"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140 170 L 160 170"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 180 L 155 180"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135 190 L 165 190"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 200 L 155 200"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140 210 L 160 210"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 220 L 155 220"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135 230 L 165 230"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 240 L 155 240"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 140 250 L 160 250"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 145 260 L 155 260"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />
          <path d="M 135 270 L 165 270"
                fill="#327864"
                stroke="white"
                stroke-width="1.75" />

          <text fill="white"
                x="115"
                y="195">10</text>
          <text fill="white"
                x="170"
                y="195">10</text>
          <text fill="white"
                x="115"
                y="235">20</text>
          <text fill="white"
                x="170"
                y="235">20</text>
          <text fill="white"
                x="115"
                y="275">30</text>
          <text fill="white"
                x="170"
                y="275">30</text>

          <use x="135"
               y="40"
               xlink:href="#panel-targetpitch" />
        </g>
      </svg>

      <defs>
        <g id="line">
          <path d="M 150 23 L 150 30 "
                fill="none"
                stroke="black"
                stroke-width="1"></path>
        </g>
        <g id="line-min">
          <path d="M 150 25 L 150 30 "
                fill="none"
                stroke="black"
                stroke-width="1"></path>
        </g>
        <g id="line-max">
          <path d="M 150 20 L 150 30 "
                fill="none"
                stroke="black"
                stroke-width="1"></path>
        </g>
      </defs>

      <g id="horizonCircle">
        <path d="M 94 125 L 115 125 115 129"
              stroke="yellow"
              stroke-width="5" />
        <path d="M 95 125 L 115 125 115 128"
              stroke="black"
              stroke-width="1"
              fill="none" />

        <path d="M 207 125 L 186 125  186 129"
              stroke="yellow"
              stroke-width="5" />
        <path d="M 206 125 L 186 125  186 128"
              stroke="black"
              stroke-width="1"
              fill="none" />
        <circle cx="150"
                cy="125"
                r="3"
                stroke="yellow"
                stroke-width="2"
                fill="none" />

        <path d="M 90 45 Q 150 15 210 45 "
              stroke="black"
              stroke-width="2"
              fill="none"></path>

        <use xlink:href="#line"
             fill="none"
             stroke="black"
             stroke-width="1" />

        <use xlink:href="#line-min"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(8,150,150)" />
        <use xlink:href="#line-min"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(16,150,150)" />
        <use xlink:href="#line-max"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(24,150,150)" />
        <use xlink:href="#line"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(35,150,150)" />

        <use xlink:href="#line-min"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(-8,150,150)" />
        <use xlink:href="#line-min"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(-16,150,150)" />
        <use xlink:href="#line-max"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(-24,150,150)" />
        <use xlink:href="#line"
             fill="none"
             stroke="black"
             stroke-width="1"
             transform="rotate(-35,150,150)" />

        <text fill="black"
              style="font-size: 10px"
              x="125"
              y="25">10</text>
        <text fill="black"
              style="font-size: 10px"
              x="162"
              y="25">10</text>

        <text fill="black"
              style="font-size: 10px"
              x="110"
              y="27">20</text>
        <text fill="black"
              style="font-size: 10px"
              x="178"
              y="27">20</text>

        <text fill="black"
              style="font-size: 10px"
              x="88"
              y="30">30</text>
        <text fill="black"
              style="font-size: 10px"
              x="200"
              y="30">30</text>

        <text fill="black"
              style="font-size: 10px"
              x="68"
              y="40">45</text>
        <text fill="black"
              style="font-size: 10px"
              x="222"
              y="40">45</text>
      </g>

      <!-- <g style="font-size: 11px">
        <text fill="white"
              style="font-size: 10px"
              x="210"
              y="130">
          {{ com206.CLRATE }}
        </text>
        <text fill="white"
              x="234"
              y="118"
              v-show="arrowUp">⬆</text>
        <text fill="white"
              x="234"
              y="142"
              v-show="arrowDown">⬇</text>
        <text fill="white"
              x="227"
              y="130">m/s</text>
      </g> -->
    </svg>
  </div>
</template>
 
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data () {
    return {
      roll: 0,
      pitch: 0,
      yaw: 0,
      reAlt: 0,
      AS: 0,
      Troll: 0,
      Tpitch: 0,
      Tyaw: 0,
      TreAlt: 0, // 有
      TAS: 0, // 有
      com206: "",
      stp: "",
      temstp: "",
      temcom206: "",
      arrowUp: false,
      arrowDown: false,
      strContent: ""
    };
  },
  computed: {
    getNumbPitchRoll () { // 有
      //console.log(this.roll, this.pitch);
      return (
        "rotate(" + this.roll + ",150,150) translate(0," + this.pitch * 4 + ")"
      );
    },
    getPitchRoll () {
      //console.log(this.roll, this.pitch);
      return (
        "rotate(" + this.roll + ",150,150) translate(0," + this.pitch * 5 + ")"
      );
    },
    getSpeed () { // 有
      //console.log("Speed---"+this.AS);
      return "translate(0," + this.AS * (640 / 160) + ")";
    },
    getTargetSpeed () { // 有
      var dbSpeedHeight = 640; // 刻度尺的总长度
      var dbSpeedFaceHeight = 200; // 可见的刻度尺部分
      var fCurrentSpeed = this.AS; // 当前空速
      var fTargetSpeed = this.TAS; // 目标空速
      if (fCurrentSpeed > 160) {
        // 速度最高设置为160
        fCurrentSpeed = 160;
      }
      if (fCurrentSpeed < 0) {
        fCurrentSpeed = 0;
      }
      if (fTargetSpeed > 160) {
        fTargetSpeed = 160;
      }

      var dbPitch = (fCurrentSpeed * dbSpeedHeight) / 160; // 当前速度在可视刻度尺上的位置
      //console.log("dbPitch1---"+dbPitch);

      var dbPitchTarget = (fTargetSpeed * dbSpeedHeight) / 160; //

      var dbDeffer = dbPitchTarget - dbPitch;
      //console.log("dbDeffer---"+dbDeffer);
      if (dbDeffer > 0) {
        dbPitchTarget =
          5 +
          (dbSpeedFaceHeight / 2 + dbDeffer > dbSpeedFaceHeight
            ? -dbSpeedFaceHeight
            : -(dbSpeedFaceHeight / 2 + dbDeffer));
      } else {
        dbPitchTarget =
          5 +
          (dbSpeedFaceHeight / 2 - dbDeffer < 0
            ? 0
            : -(dbSpeedFaceHeight / 2 + dbDeffer));
      }

      //console.log("dbPitch2---"+dbPitch);
      return "translate(0," + dbPitchTarget + ")";
    },
    getAltHigh () { // 有
      //console.log("Alt---"+this.reAlt);

      var dbviewHeight = 364;
      var dbSpeedHeight = 364;
      var dbSpeedFaceHeight = (216 * dbSpeedHeight) / dbviewHeight;
      var fCurrentSpeed = this.reAlt / 100;
      if (fCurrentSpeed > 15) {
        fCurrentSpeed = 15;
      }
      if (fCurrentSpeed < -3) {
        fCurrentSpeed = -3;
      }
      var dbPitch =
        ((fCurrentSpeed + 3) * dbSpeedHeight) / 18 - dbSpeedFaceHeight / 2;
      return "translate(0, " + dbPitch + ")";
    },
    getAltLow () { // 有
      //console.log("Alt---"+this.reAlt);
      //console.log("TargetAlt---"+this.TreAlt);
      var fCurrentSpeed = this.reAlt % 100;
      var dbPitch = fCurrentSpeed * 2 - 18;
      return "translate(0, " + dbPitch + ")";
    },
    getYaw () { // 有
      //console.log("yaw---"+this.yaw);

      // 0: grid的总长，1：刻度尺的总长，2：viewbox的总长，3：当前航向角
      var dbviewWidth = 730;
      var dbSpeedWidth = 700 - 5;
      var dbSpeedFaceWidth = (170 * dbSpeedWidth) / dbviewWidth;
      var fCurrentSpeed = this.yaw;
      if (fCurrentSpeed < 0) {
        fCurrentSpeed += 360;
      }
      if (fCurrentSpeed == 360) {
        fCurrentSpeed = 0;
      }
      //console.log("fCurrentSpeed---"+ fCurrentSpeed);
      var dbPitch = -(
        (fCurrentSpeed * dbSpeedWidth) / 360 -
        dbSpeedFaceWidth / 2
      );

      //console.log("dbPitch---"+ dbPitch);
      return "translate(" + dbPitch + ", 0)";
    },
    getTargetYaw () { // 有
      var dbviewWidth = 720; // ViewBox的总长度
      var dbSpeedWidth = 710 - 5; // 刻度尺的总长度
      var dbSpeedFaceWidth = (170 * dbSpeedWidth) / dbviewWidth; // 可见的刻度尺部分
      var fCurrentSpeed = this.yaw; // 当前航向角
      if (fCurrentSpeed < 0) {
        fCurrentSpeed += 360;
      }
      var fTargetSpeed = this.Tyaw; // 目标航向角
      if (fCurrentSpeed == 360) fCurrentSpeed = 0; // 目标航向角最高设置为36

      var dbPitch = (fCurrentSpeed * dbSpeedWidth) / 360; // 当前航向角在可视刻度尺上的位置

      var dbPitchTarget = (fTargetSpeed * dbSpeedWidth) / 360; // 当前航向角在可视刻度尺上的位置

      var dbDeffer = dbPitchTarget - dbPitch;
      dbPitch = dbSpeedFaceWidth / 2 + dbDeffer;
      return "translate(" + dbPitch + ", 0)";
    },
    getRoll () { // 有
      //console.log("roll---" + this.roll);
      return "rotate(" + this.roll + ",150,125)";
    },
    getTargetRoll () { // 有
      //console.log("Troll---" + this.Troll);
      return "rotate(" + this.Troll + ",150,125)";
    },
    getTargetPitch () { // 有
      // console.log("Tpitch---" + this.Tpitch);
      return "translate(0," + this.Tpitch * -4 + ")";
    },
    ...mapGetters({
      // getStateCM206: "getStateCM206",
      getStateStp: "getStateStp",
    }),
    dscr () {
      return this.strContent;
    },
  },
  methods: {
    getAltHighNum: function () { // 有
      var fAltitude = parseInt(this.reAlt / 100);
      if (fAltitude > 80) {
        fAltitude = 80;
      }
      if (fAltitude < 0) {
        fAltitude = 0;
      }
      return fAltitude;
    },
    changUavDscr (idx, corlor, strDesc) {
      this.strContent = strDesc;
    },
  },
  watch: {
//     getStateCM206 (val) {
//       this.temcom206 = JSON.parse(val);
//       // if (this.temcom206.DSCR != this.dscr) return;
//       // else this.com206 = this.temcom206;
//       if (this.com206.CLRATE > 0) {
//         this.arrowUp = true;
//         this.arrowDown = false;
//       } else {
//         this.arrowUp = false;
//         this.arrowDown = true;
//       }
//     },
    getStateStp (val) {
      this.temstp = JSON.parse(val);
      // if (this.temstp.DSCR != this.dscr) return;
      // else 
      this.stp = this.temstp;
      this.roll = this.stp.ROLL;
      this.pitch = this.stp.PITCH;
      this.yaw = this.stp.Yaw;
      this.reAlt = this.stp.RH;
      this.AS = this.stp.AS;
      this.Troll = this.stp.TR;
      this.Tpitch = this.stp.TP;
      this.Tyaw = this.stp.TYaw;
      this.TreAlt = this.stp.TRH;
      this.TAS = this.stp.TAS;
    }
  },
};
</script>
